
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<body>

<form action="/pcs/project/form" class="layui-card layui-form" data-auto="true" method="post" data-table-id="ProjectTable" id="ProjectForm">

    <input type="hidden" name="id" th:if="${vo}" th:value="${vo.id}"/>
    <input type="hidden" name="type" value="1"/>
    <div class="layui-card-body padding-15">

        <div class="layui-form-item">
            <label class="layui-form-label ">项目图片</label>
            <div class="layui-input-block ">
                <input type="hidden"  name="img" th:value="${vo?.img}" >
                <script>$("[name=img]").uploadOneImageNew();</script>
                <style>
                    .uploadimage, .uploadfile{
                        width: 78px!important;
                        height: 78px!important;
                    }
                </style>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">项目名称</label>
            <div class="layui-input-block ">
                <input type="text" name="title" required  th:value="${vo?.title}"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">服务合同</label>
            <div class="layui-input-block ">
                <select name="isNeedSignContract" lay-filter="isNeedSignContract"  required class="layui-input">
                    <option value="0" th:selected="${vo?.isNeedSignContract == 0}"  >无需签订合同</option>
                    <option value="1" th:selected="${vo?.isNeedSignContract == 1}"  >需要签订合同</option>
                </select>
            </div>
        </div>
        <th:block th:if="${vo?.isNeedSignContract == 1}">
            <div class="layui-form-item" >
                <label class="layui-form-label ">选择合同</label>
                <div class="layui-input-block ">
                    <select name="contractTplId"  required class="layui-input">
                        <th:block>
                            <th:block th:each="item:${contractTplList}">
                                <option th:value="${item.id}" th:text="${item.title}" th:selected="${item.id == vo?.contractTplId}"></option>
                            </th:block>
                        </th:block>

                    </select>
                </div>
            </div>
        </th:block>
        <th:block th:else>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label ">选择合同</label>
                <div class="layui-input-block ">
                    <select name="contractTplId"  required class="layui-input">
                        <th:block>
                            <th:block th:each="item:${contractTplList}">
                                <option th:value="${item.id}" th:text="${item.title}" th:selected="${item.id == vo?.contractTplId}"></option>
                            </th:block>
                        </th:block>

                    </select>
                </div>
            </div>
        </th:block>




        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">最高陪护限制人数</label>
                <div class="layui-input-inline">
                    <input type="number" name="numberLimit" required  th:value="${vo?.numberLimit}"  class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">每小时陪护价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" required  th:value="${vo?.price}"  class="layui-input">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">按阶段陪护价格</label>
            <div class="layui-input-block ">
                <div class="layui-col-xs3">
                    <div class="layui-inline">
                        <label class="layui-form-label">陪护时段</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stageTimeRange"  required    class="layui-input stageTimeRange">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card padding-15">
            <div class="layui-row" v-for="(item,key) in stage">
                <div class="layui-col-xs3">
                    <div class="layui-inline">
                        <label class="layui-form-label">陪护类型</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stageTitle" required v-mode="item.title" :value="item.title"  class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="layui-inline">
                        <label class="layui-form-label">陪护时段</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stageTimeRange"  v-mode="item.timeRange" required    class="layui-input stageTimeRange">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="layui-inline">
                        <label class="layui-form-label">陪护价格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stagePrice" required v-mode="item.price"   class="layui-input">
                        </div>
                    </div>
                </div>

            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label ">服务说明</label>
            <div class="layui-input-block ">
                <textarea placeholder="请输入服务说明" class="layui-textarea" name="content">[[${vo?.content}]]</textarea>
            </div>
        </div>


        <div class="text-center layui-form-actions1">
            <button class="layui-btn" type="submit">保存</button>
            <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要取消编辑吗？" type='button'>关闭</button>
        </div>

    </div>
    <style>
        .layui-form-label{
            width: 96px;
        }
        .layui-input-block{
            margin-left: 126px;
        }
    </style>
</form>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        // select 事件
        form.on('select(isNeedSignContract)', function(data){
            console.log(data)
            var value = data.value; // 获得被选中的值
            if(value == 1){
                $("[name=contractTplId]").parent().parent().show();
            }else{
                $("[name=contractTplId]").parent().parent().hide();
            }

        });
        laydate.render({
            elem: '.stageTimeRange',
            type: 'time',
            range: true
        });
    });

</script>

<script th:inline="javascript" >
    require(['vue', 'ELEMENT'], function (Vue, ELEMENT) {
        ELEMENT.install(Vue)
        new Vue({
            el: '#ProjectForm',
            data: {
                stage: [
                    {
                        title: '上午陪护',
                        timeRange: '08:00:00 - 12:00:00',
                        price: '100'
                    },
                    {
                        title: '下午陪护',
                        timeRange: '12:00:00 - 18:00:00',
                        price: '100'
                    },
                ]
            }
        })
    })
</script>




</body>
</html>